<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>道具强化系统测试</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #2c3e50;
      color: #ecf0f1;
      padding: 20px;
    }

    .test-container {
      max-width: 800px;
      margin: 0 auto;
      background: rgba(0, 0, 0, 0.8);
      padding: 20px;
      border-radius: 10px;
    }

    .test-section {
      margin-bottom: 20px;
      padding: 15px;
      background: rgba(52, 73, 94, 0.5);
      border-radius: 8px;
    }

    .powerup-status {
      background: rgba(52, 73, 94, 0.9);
      border-radius: 10px;
      padding: 15px;
      margin-top: 10px;
      border: 2px solid #3498db;
    }

    .powerup-item {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      padding: 8px 12px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      border-left: 4px solid #3498db;
    }

    .powerup-progress-container {
      width: 60px;
      height: 6px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 3px;
      overflow: hidden;
      margin-left: 10px;
    }

    .powerup-progress {
      height: 100%;
      background: linear-gradient(90deg, #3498db, #2980b9);
      border-radius: 3px;
      transition: width 0.3s ease;
    }

    button {
      background: #e74c3c;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
      margin: 5px;
    }

    button:hover {
      background: #c0392b;
    }
  </style>
</head>

<body>
  <div class="test-container">
    <h1>道具强化系统测试</h1>

    <div class="test-section">
      <h2>道具状态显示测试</h2>
      <div class="powerup-status">
        <div id="adrenalineStatus" class="powerup-item" style="display: none;">
          <span class="powerup-icon">⌛</span>
          <span class="powerup-text">肾上腺素</span>
          <div class="powerup-progress-container">
            <div class="powerup-progress"></div>
          </div>
        </div>
        <div id="vestStatus" class="powerup-item" style="display: none;">
          <span class="powerup-icon">🛡️</span>
          <span class="powerup-text">防弹衣</span>
        </div>
        <div id="dynamiteStatus" class="powerup-item" style="display: none;">
          <span class="powerup-icon">💥</span>
          <span class="powerup-text">炸药包</span>
        </div>
      </div>

      <div style="margin-top: 15px;">
        <button onclick="testAdrenaline()">测试肾上腺素</button>
        <button onclick="testVest()">测试防弹衣</button>
        <button onclick="testDynamite()">测试炸药包</button>
        <button onclick="clearAll()">清除所有</button>
      </div>
    </div>

    <div class="test-section">
      <h2>道具配置信息</h2>
      <div id="configInfo"></div>
    </div>
  </div>

  <script>
    // 道具类型枚举
    const POWERUP_TYPES = {
      MEDKIT: 'medkit',
      ADRENALINE: 'adrenaline',
      BULLETPROOF_VEST: 'bulletproof_vest',
      DYNAMITE_PACK: 'dynamite_pack',
      INTELLIGENCE_FILE: 'intelligence_file'
    };

    // 道具配置
    const POWERUP_CONFIG = {
      [POWERUP_TYPES.MEDKIT]: {
        name: '血包',
        icon: '❤️',
        color: '#e74c3c',
        description: '恢复1点生命值',
        sound: 'heartbeat'
      },
      [POWERUP_TYPES.ADRENALINE]: {
        name: '肾上腺素',
        icon: '💉',
        color: '#3498db',
        description: '射速提升200%',
        sound: 'injection'
      },
      [POWERUP_TYPES.BULLETPROOF_VEST]: {
        name: '防弹衣',
        icon: '🛡️',
        color: '#27ae60',
        description: '获得1次伤害免疫',
        sound: 'metal'
      },
      [POWERUP_TYPES.DYNAMITE_PACK]: {
        name: '炸药包',
        icon: '💥',
        color: '#f39c12',
        description: '下次射击引发爆炸',
        sound: 'fuse'
      },
      [POWERUP_TYPES.INTELLIGENCE_FILE]: {
        name: '情报文件',
        icon: '📄',
        color: '#8b4513',
        description: '立即增加200分',
        sound: 'paper'
      }
    };

    // 显示配置信息
    function showConfig() {
      const configInfo = document.getElementById('configInfo');
      let html = '<table style="width: 100%; border-collapse: collapse;">';
      html += '<tr><th style="border: 1px solid #666; padding: 8px;">道具类型</th><th style="border: 1px solid #666; padding: 8px;">图标</th><th style="border: 1px solid #666; padding: 8px;">颜色</th><th style="border: 1px solid #666; padding: 8px;">描述</th></tr>';

      Object.entries(POWERUP_CONFIG).forEach(([type, config]) => {
        html += `<tr>
                    <td style="border: 1px solid #666; padding: 8px;">${config.name}</td>
                    <td style="border: 1px solid #666; padding: 8px; text-align: center;">${config.icon}</td>
                    <td style="border: 1px solid #666; padding: 8px; background-color: ${config.color};"></td>
                    <td style="border: 1px solid #666; padding: 8px;">${config.description}</td>
                </tr>`;
      });
      html += '</table>';
      configInfo.innerHTML = html;
    }

    // 测试肾上腺素
    function testAdrenaline() {
      const status = document.getElementById('adrenalineStatus');
      const progress = status.querySelector('.powerup-progress');
      const text = status.querySelector('.powerup-text');

      status.style.display = 'block';
      progress.style.width = '100%';
      text.textContent = '肾上腺素 (10s)';

      // 模拟倒计时
      let time = 10;
      const interval = setInterval(() => {
        time--;
        const percent = (time / 10) * 100;
        progress.style.width = percent + '%';
        text.textContent = `肾上腺素 (${time}s)`;

        if (time <= 0) {
          clearInterval(interval);
          status.style.display = 'none';
        }
      }, 1000);
    }

    // 测试防弹衣
    function testVest() {
      const status = document.getElementById('vestStatus');
      status.style.display = 'block';

      setTimeout(() => {
        status.style.display = 'none';
      }, 3000);
    }

    // 测试炸药包
    function testDynamite() {
      const status = document.getElementById('dynamiteStatus');
      status.style.display = 'block';

      setTimeout(() => {
        status.style.display = 'none';
      }, 2000);
    }

    // 清除所有
    function clearAll() {
      document.getElementById('adrenalineStatus').style.display = 'none';
      document.getElementById('vestStatus').style.display = 'none';
      document.getElementById('dynamiteStatus').style.display = 'none';
    }

    // 页面加载时显示配置
    window.onload = showConfig;
  </script>
</body>

</html>